<template>
<div style="height:100%">
  <div class="buttonarea">

   
  </div>
 
<div >
  <el-table
      :data="orders"
      @selection-change="handleSelectionChange">

      style="width: 100%;"
      row-key="id"
      border
       >
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
  <el-table-column
     label="应付款日期"
    width="180">
         <template slot-scope="scope">{{getNowFormatDate(scope.row.createTime)}}</template>

  </el-table-column>
    <el-table-column
     label="实际付款日期"
    width="180">
             <template slot-scope="scope">{{getNowFormatDate(scope.row.paymentTime)}}</template>

  </el-table-column>
  <el-table-column
    prop="payment"
    label="付款金额">
  </el-table-column>
  <el-table-column
   
    label="状态">
     <template slot-scope="scope">{{scope.row.status==0?(scope.row.selftraveltag==1?'增员':'')+'未付款':(scope.row.selftraveltag==1?'增员':'')+'已付款'}}</template>
  </el-table-column>
    <el-table-column
    label="参保人数"
    prop="lzxcount">
    </el-table-column>
    <el-table-column
    fixed="right"
    label="操作"
    width="250">
    <template slot-scope="scope">
    <!-- <el-button slot="reference" type="text" size="small">查看</el-button> -->
    <el-button type="text" size="small" @click="dialogTableVisible = true;members=[];memberpage=1;getmembersoforder(scope.row.id)">查看参保人员</el-button>
       <el-button type="text" v-if="scope.row.status==0" size="small" @click="showqrcode(scope.row)">付款二维码</el-button>  

    </template>
  </el-table-column>
  </el-table>
  <div style="display:block;text-align:center">
 <el-pagination
      @current-change="handleCurrentChangea"
      :current-page.sync="page"
      :page-size="size"
  background
  layout="prev, pager, next"
  :total="total">
 </el-pagination>
</div>
    <el-button style="float:right;position:relative;right:20px" type="primary"   size="small" @click="showqrcodecombine">合并支付</el-button>  

 <el-dialog title="参保人员列表" :visible.sync="dialogTableVisible">
  <el-table :data="members">
    <el-table-column   label="参保日期" width="150"><template slot-scope="scope">{{getNowFormatDate(scope.row.created)}}</template></el-table-column>
    <el-table-column property="username" label="姓名" width="200"></el-table-column>
    <el-table-column property="creditcard" label="身份证号"></el-table-column>
  </el-table>
  <div class="block" style='text-align: center'>
  <el-pagination
      @current-change="handleCurrentChangeb"
      :current-page.sync="memberpage"
      :page-size="10"
  background
  layout="prev, pager, next"
  :total="membertotal">
 </el-pagination>
 </div>
</el-dialog>



  </div>

  <!-- <el-dialog title="付款二维码" :visible.sync="shoukuanVisible" width="500px">
    <img :src="codeurl" style="width: 400px;margin: 10px;">
    <!-- <img src="../../img/zhifubao.jpg" style="width: 400px;margin: 10px;"> -->

    <!-- </el-dialog>   -->

    <el-dialog title="支付二维码" :visible.sync="shoukuanVisible" width="500px">
            
             <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="微信支付二维码" name="first" style="text-align: center;">
                  <div><img src="@/assets/images/youbao/weixin.png" style="width: 100px;margin: 10px;"></div>
                  <div><img :src="codeurl" style="width: 200px;margin: 10px;"></div>
                  <div>收款金额：{{payment}}元</div>
              </el-tab-pane>
              <el-tab-pane label="支付宝支付二维码" name="second"  style="text-align: center;"> 
                  <div><img src="@/assets/images/youbao/zhifubao.png" style="width: 100px;margin: 10px;"></div>
                    <div><img :src="codeurl" style="width: 200px;margin: 10px;"></div>
                    <div>收款金额：{{payment}}元</div>
          
              </el-tab-pane>
            </el-tabs>
              
          
              </el-dialog>

    <el-dialog title="合并支付二维码" :visible.sync="shoukuanVisiblecom" width="500px">
            
             <el-tabs v-model="activeNamecom" @tab-click="handleClickcom">
              <el-tab-pane label="微信支付二维码" name="first" style="text-align: center;">
                  <div><img src="@/assets/images/youbao/weixin.png" style="width: 100px;margin: 10px;"></div>
                  <div><img :src="codeurl" style="width: 200px;margin: 10px;"></div>
                  <div>收款金额：{{payment}}元</div>
              </el-tab-pane>
              <el-tab-pane label="支付宝支付二维码" name="second"  style="text-align: center;"> 
                  <div><img src="@/assets/images/youbao/zhifubao.png" style="width: 100px;margin: 10px;"></div>
                    <div><img :src="codeurl" style="width: 200px;margin: 10px;"></div>
                    <div>收款金额：{{payment}}元</div>
          
              </el-tab-pane>
            </el-tabs>
              
          
              </el-dialog>


  </div>
</template>

<script>
import { payordercom,payorder,getpolicysbycustomerid,getorders,getmembersoforder } from '@/api/policy'

export default {
  name: 'topayorder',
  components: { },
    computed: {
  },
   data() {
      return {
        multipleSelection:[],
        ids:'',
          payment:0.00,
          activeName:'first',
              activeNamecom:'first',
        orderid:'',
        memberpage:1,
        membertotal:0,
        page:1,
        size:10,
        total:0,
        codeurl:'',
        shoukuanVisible:false,
        shoukuanVisiblecom:false,
        dialogTableVisible:false,
        orderVisible:false,
        orders: [ ],
        comtype:'',
        fkstatevalue:'',
        input3: '',
        select: '',
        policys: [ ],
        members:[],
        websocket:null,


      }},
  components:{


  },
  activated(){
    // this.getpossiblemembers(0);

  },
  beforeDestroy(){
  console.log(this.websocket);
  this.websocket.close(); 
  console.log('websocket链接关闭');
  },
  mounted(){
//  this.getpolicys();
 this.getorders(this.$route.query.id)
 this.initwebsocket();
  },
  methods:{
   initwebsocket(){
      var _this=this;
      var websocket = null;
var host = "crm.zhiyuewulian.com/mapi"; 
var username = JSON.parse(localStorage.getItem("user")).id; // 获得当前登录人员的userName 
console.log('host:'+host);
console.log('ws:'+'ws://'+host+'/websocket?code='+username);
 // alert(username)
//判断当前浏览器是否支持WebSocket 
if ('WebSocket' in window) { 
    // alert("浏览器支持Websocket")
    websocket = new WebSocket('wss://'+host+'/websocket?code='+username); 
} else { 
    // alert('当前浏览器 Not support websocket') 
} 
 this.websocket=websocket;
     console.log('new socket success'+':'+this.websocket);

//连接发生错误的回调方法 
websocket.onerror = function() { 
  console.log("WebSocket连接发生错误")
  console.log("WebSocket连接发生错误"); 
};  
   
//连接成功建立的回调方法 
websocket.onopen = function() {
console.log("WebSocket连接成功") 
 
} 
   
//接收到消息的回调方法 
websocket.onmessage = function(event) {
    console.log("接收到消息的回调方法") 
    console.log("这是后台推送的消息："+event.data);
    _this.setMessageInnerHTML(event.data)
// 　　　　 websocket.close();
// console.log("webSocket已关闭！")
} 
   
//连接关闭的回调方法 
websocket.onclose = function(e) { 
  console.log("WebSocket连接关闭"); 
  console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
  console.log(e)
} 
   
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 
/*window.onbeforeunload = function() { 
  
} */

    },
    //关闭WebSocket连接 
  closeWebSocket() { 
    this.websocket.close(); 
},
    //将消息显示在网页上
      setMessageInnerHTML(innerHTML) {
      //  layer.msg(innerHTML)
      try {
        var messageobj=JSON.parse(innerHTML);
      var message=messageobj.message;
      var orderid=messageobj.orderid;
       if(message.indexOf('支付成功')!=-1)
       {
         if(this.orderid==orderid)
         {
            this.shoukuanVisible=false;
            this.shoukuanVisiblecom=false;
            this.$toast(message)
          }
         else{
             this.shoukuanVisible=false;
            this.shoukuanVisiblecom=false;
            this.$toast("您有订单支付成功")
         }
            this.getorders(this.$route.query.id)

     

       }
      } catch (error) {
        
      }
     

    },
    toadd(id){
      this.$router.push("addcustomerlead?id="+id)
    },
       getNowFormatDate(dt) {
         if(!dt)
         return dt;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
        handleCurrentChange(){
          this.getpolicys();
        },
          handleCurrentChangea(){
          this.getorders(this.$route.query.id);
        },
          handleCurrentChangeb(){
          this.getmembersoforder(this.orderid);
        },
        showqrcodecombine(){

//  this.orderid=order.id;
// this.orderVisible = true;
// this.payment=order.payment;
if(this.multipleSelection.length==0)
{
  this.$toast('请选择订单')
  return;
}
if(this.activeNamecom=='first')
 this.payscom(this.ids,'http://crm.zhiyuewulian.com',2);
 else
 this.payscom(this.ids,'http://crm.zhiyuewulian.com',1);

        },
         handleSelectionChange(val) {
           console.log(val)
        this.multipleSelection = val;
        var ids="";
        for(var i=0;i<this.multipleSelection.length;i++)
        {
          if(i!=this.multipleSelection.length-1)
          ids+=this.multipleSelection[i].id+",";
          else
          ids+=this.multipleSelection[i].id;

        }
        this.ids=ids;
      },
        showqrcode(order){

          // 
        //  this.pays(orderid,'https://ynujly.hxxdib.com',2);
           //payorder,getqrcode

 this.orderid=order.id;
// this.orderVisible = true;
this.payment=order.payment;
if(this.activeName=='first')
 this.pays(this.orderid,'http://crm.zhiyuewulian.com',2);
 else
 this.pays(this.orderid,'http://crm.zhiyuewulian.com',1);


        },
        shoukuan(policyid){
            this.orders=[];
          this.orderVisible = true;
          this.getorders(policyid);

        },
        getpolicys(tag){
          this.$loadingshow();
       getpolicysbycustomerid({ page:this.page,size:this.size }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
          this.policys=res.result.list;
           this.total=res.result.total;
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },
      getorders(policyid){


           this.$loadingshow();
       getorders({ page:this.page,size:this.size, policyid:policyid,status:0 }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
                    this.orders=res.result.list;
                    this.total=res.result.total;

        } 
        else{
          this.$toast(res.message)
        }
      });
        



       

      },

     getmembersoforder(id){
          this.$loadingshow();
          this.orderid=id;
       getmembersoforder({ page:this.memberpage,size:10,orderid:id }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
          this.members=res.result.list;
           this.membertotal=res.result.total;
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },

    handleClick(tab, event) {
        // console.log(tab, event);
        var type=2;
        if(tab.index==0)
        type=2;
        else
        type=1;
        this.pays(this.orderid,'http://crm.zhiyuewulian.com',type);

      },
   handleClickcom(tab, event) {
        // console.log(tab, event);
        var type=2;
        if(tab.index==0)
        type=2;
        else
        type=1;
        this.payscom(this.ids,'http://crm.zhiyuewulian.com',type);

      },
   pays(orderid,redirecturl,paymenttype)
{


        this.$loadingshow();
       payorder({  orderid:orderid,type:paymenttype,redirect:redirecturl}).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
         if(paymenttype==1)
             {

          //     $("form").each(function(){
          //   this.remove();
          //  });
          document.write(res.result);

             }
             else{
              this.codeurl=res.result.codeurl;
              this.shoukuanVisible = true;
             }
          //  this.codeurl=res.result.codeurl;
          //   this.shoukuanVisible = true;

        } 
        else{
          this.$toast(res.message)
        }
      });
        
 
},
 payscom(orderid,redirecturl,paymenttype)
{


        this.$loadingshow();
       payordercom({  orders:orderid,type:paymenttype,redirect:redirecturl}).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
         this.payment=res.result.payment;
         if(paymenttype==1)
             {

          //     $("form").each(function(){
          //   this.remove();
          //  });
          document.write(res.result);

             }
             else{
              this.codeurl=res.result.codeurl;
              this.shoukuanVisiblecom = true;
             }
          //  this.codeurl=res.result.codeurl;
          //   this.shoukuanVisible = true;

        } 
        else{
          this.$toast(res.message)
        }
      });
        
 
}      
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:90%;
  // height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:140px;
}
/deep/ .el-form-item{
  width: 20%;
}
</style>
